<template>
   <div>

        <!-- 头部返回按钮 -->
       <div class="header">
          <div class="text" @click="okk">
          <i class="iconfont icon-back"></i>
          <span class="text1">
            <i class="iconfont icon-fanhui"></i>
            发布文章
            </span>
          </div>
       </div>

   <!-- 编辑信息 -->
   <div>
<el-form ref="form" :model="form" label-width="80px">

     <!-- 标题 -->
    <el-form-item label="文章标题" style="margin:10px;">
      <el-input v-model="form.title" style="width:90%;margin:10px"></el-input>
    </el-form-item>

     <!-- 上传通告封面 -->
    <div class="portrait">
       <div class="right">上传文章封面</div>
      <span class="details">
        <el-upload
            class="avatar-uploader"
            action="http://localhost:7001/uploadUser"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            >
            <img v-if="form.image" :src="form.image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
      </span>
    </div>
         <el-card style="height: 610px;">
          <quill-editor
          v-model="form.content"
          ref="myQuillEditor"
          style="height: 500px;"
          :options="editorOption"
          >
          </quill-editor>
        </el-card>
        <div class="button">
          <el-button class="but01"  size="mini" @click="publicAnnounce">发布通告</el-button>
          <el-button class="but01"  size="mini" >取消</el-button>
       </div>
    </el-form>
   </div>

   <div>
     <!-- <mt-button
     type="primary"
     size="large"
     class="button"
     @click="publicAnnounce"
     >发布通告
     </mt-button> -->
   </div>

   </div>
</template>

<script>
import { Toast, Indicator } from 'mint-ui'

import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: 'FuncFormsEdit',
  components: {
    quillEditor
  },
  data () {
    return {
      form: { // 定义表单对象
        title: '',
        image: '',
        content: ''
      },
      // imageUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
      // content: '<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>',
      editorOption: {
        // placeholder: '请输入',
        // theme: 'snow', // or 'bubble'
        // modules: {
        //   toolbar: {
        //     container: '#toolbar'
        //   }
        // }
      }
    }
  },
  methods: {
    okk () {
      this.$router.go(-1)// 返回上一层
    },
    beforeAvatarUpload (e) {

    },
    publicAnnounce (e) {
      this.form.user_id = this.$store.getters['user/id']
      console.log(this.form)
      if (!this.form.content) {
        Toast({
          message: '正文不能为空',
          position: 'middle',
          duration: 3000
        })

        return
      }
      Indicator.open({
        text: '正在提交中...',
        spinnerType: 'fading-circle'
      })
      // 请求后端的接口
      //  MessageBox.prompt('请输入地址').then(({ value, action }) => {
      this.$http({
        url: '/saveAnnounce', // 请求地址
        method: 'post', // 设置请求方式
        data: this.form
      }).then((e) => { // 处理请求返回的结果
        console.log(e.data)
        Indicator.close()
        if (e.data.code === '1') {
          Toast({
            message: '发布成功，待审核',
            position: 'middle',
            duration: 3000
          })
          this.$router.push({
            name: 'index'
          })
        } else {
          Toast({
            message: '发布失败',
            position: 'middle',
            duration: 3000
          })
        }
      }).catch(res => {
        Indicator.close()
        Toast({
          message: '发布失败',
          position: 'middle',
          duration: 3000
        })
      })
    },
    handleAvatarSuccess (response, file, fileList) {
      const url = 'http://localhost:7001' + file.response.url
      console.log(url)

      this.form.image = url
    }
  }

}

</script>

<style scoped>
.header {
  height: 1.5rem;
  width: 100%;
  background:#96D596;
}
.text{
  padding-top:4%;
  font-size:0.55rem;
  color:white
}
.iconfont{
  font-size: 0.55rem;
}
 .button{
  text-align: center;
  margin:auto 0;
  padding:10px;
  margin:10px 10px;
}
.portrait{
  margin-top:10px;
  padding-bottom:10px;
  /* display: flex; */
  /* justify-content: space-between; */
  /* align-items: center; */
  /* border-bottom: 1px solid #ccc; */
}

.portrait .details{
  padding:10px;
}
.portrait .right{
  margin:10px 0px 0px 20px;
}
/* 上传头像 */
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #96D596;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    border-radius:50px;
    margin-right: 20px;
    width:50px;
    height: 50px;
    text-align: center;
    margin-top:10px;
    margin-left: 30px;
  }
  .avatar {
    margin-left: 30px;
    width: 90px;
    height: 90px;
    border-radius: 10px;
    /* display: block; */
  }
  .but01{
    background: #96D596;
  }
</style>
